<template></template>
<!-- 地图控件 -->

<script setup>
import { onMounted } from "vue"
// import { gaodeVector, gaodeImage } from '../../map_libs/TDmap'
import {
  TianDiMap_vec,
  TianDiMap_cva,
  TianDiMap_img,
  TianDiMap_cia,
} from "../../map_libs/TDmap"
onMounted(() => {
  //获取 map 属性
  const map = useGlobalMap()
  // 地图控件
  // 1. 视图跳转控件
  const ZoomToExtent = new ol.control.ZoomToExtent({
    extent: [110, 30, 160, 30],
  })
  map.addControl(ZoomToExtent)
  /* 2. zoomslider */
  /* 实例化zoomslider */
  const zoomslider = new ol.control.ZoomSlider()
  map.addControl(zoomslider)

  const fullScreen = new ol.control.FullScreen()
  map.addControl(fullScreen)

  // 3、鼠标位置显示坐标控件
  const mousePositionControl = new ol.control.MousePosition({
    /* 坐标格式 */
    coordinateFormat: ol.coordinate.createStringXY(4),
    projection: "EPSG:4326",
    /* 坐标信息显示样式类名,默认是'ol-mouse-position' */
    className: "ol-mouse-position",
    target: document.getElementById("mouse-position"),
    undefinedHTML: "&nbsp",
  })
  map.addControl(mousePositionControl)

  /* 4、比例尺 */
  const scaleLineControl = new ol.control.ScaleLine({
    /* 设置比例尺单位,degrees,imperial,us,nautical,metric */
    units: "metric",
  })
  map.addControl(scaleLineControl)
  const overviewMapControl = new ol.control.OverviewMap({
    /* 鹰眼控件样式  */
    className: "ol-overviewmap ol-custom-overviewmap",
    // layers: [gaodeImage, gaodeVector],
    layers: [TianDiMap_img, TianDiMap_vec],
    /* 鹰眼控件展开时功能按钮上的标识(网页的JS的字符编码) */
    collapseLabel: "\u00BB",
    /* 鹰眼控件折叠时功能按钮上的标识(网页的JS的字符编码) */
    label: "\u00AB",
    /* 初始为展开显示方式 */
    collapsed: false,
    view: new ol.View({
      projection: "EPSG:4326",
      minZoom: 8,
      maxZoom: 18,
    }),
  })
  map.addControl(overviewMapControl)
})
</script>

<style scoped></style>
